import React, {Component} from 'react'
import { Table, Button, Modal, Spin } from 'antd'
import EditableInputCell from './EditableInputCell'
import { connect } from 'dva'
import { clone } from '../../../../util/utils'
import styles from './css/PermissionContent.css'

function renderInputCell(dispatch, text, record, column) {
	return <EditableInputCell 
			editable={record.editable} 
			value={text} 
			onChange={e => {
				dispatch({
					type: 'permission/editRecord',
					record: record,
					key: column,
					value: e.target.value
				})
			}} />
}

function buildColumns({state, dispatch}) {
	return [
		{
		  	title: '权限id',
		  	dataIndex: 'permissionId',
		  	key: 'permissionId',
		}, 
		{
		  	title: '权限',
		  	dataIndex: 'permission',
		  	key: 'permission',
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'permission'),
		}, 
		{
		  	title: '权限描述',
		  	dataIndex: 'description',
		  	key: 'description',
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'description'),
		},
		{
			title: '操作',
			dataIndex: 'op',
		  	key: 'op',
		  	width: 150,
		  	fixed: 'right',
		  	render: (text, record) => {
		  		if (record.editable) {
		  			return (
					    <div>
					    	<a 
					    	onClick={() => {
					    		dispatch({
					    			type: 'permission/save',
					    			key: record.key
					    		});
					    	}}>
					    		保存
					    	</a>
					    	&nbsp;&nbsp;
					    	<a
				    		onClick={() => {
					    		dispatch({
					    			type: 'permission/cancel',
					    			record
					    		});
					    	}}>
				    			取消
				    		</a>
					    </div>
					)
		  		} else {
		  			return (
					    <div>
					    	<a 
					    	onClick={() => {
					    		dispatch({
					    			type: 'permission/edit',
					    			record
					    		});
					    	}}>
					    		修改
					    	</a>
					    	&nbsp;&nbsp;
				    		<a onClick={() => {
				    			Modal.confirm({
				    				title: '确认删除权限' + record.permissionId,
				    				cancelText: '取消',
				    				okText: '确认',
				    				okType: 'danger',
				    				onOk() {
								    	dispatch({
							    			type: 'permission/remove',
							    			permissionId: record.permissionId
							    		});
								    }
				    			})
				    		}}>
				    			删除
				    		</a>
					    </div>
					)
		  		}
		  	},
		}
	]
}

class PermissionContent extends Component {
	
	render() {
		let {state, dispatch} = this.props
		let {list, loading, pageNum, pageSize, total} = state;
		
		let dataSource = list || [];
		
		let columns = buildColumns({state, dispatch})
		return (
			<Spin spinning={loading} delay={500} size='large'>
				<div className={styles.opContainer}>
					<Button onClick={() => {
						dispatch({type: 'permission/add'})
					}}>
						添加
					</Button>
				</div>
				<Table 
					dataSource={dataSource} 
					columns={columns} 
					pagination={{
						current: pageNum,
						pageSize,
						total,
						onChange: (pageNum, pageSize) => {
							dispatch({type: 'permission/setPageNum', pageNum})
							dispatch({type: 'permission/setPageSize', pageSize})
							dispatch({type: 'permission/pagePermission', pageNum, pageSize})
						}
					}}
				/>
			</Spin>
		)
	}
	
	componentDidMount() {
		this.props.dispatch({type: 'permission/pagePermission', pageNum: 1, pageSize: 10})
	}
	
}

export default connect(state => ({
	state: {
		...state.system,
		...state.permission,
		loading: state.loading.models.permission
	}
}))(PermissionContent);